<template>
  <div class="login">
    <van-tabs class="logined">
      <div class="imgslogo">
        <img src="http://47.115.51.185/h5/img/logo2.47964cc3.png" />
      </div>
      <van-tab title="账号登录">
        <van-form @submit="loginByPassword">
          <van-field
            v-model="account"
            name="account"
            placeholder="收入手机号码"
            :rules="[
              { required: true },
              { pattern: /^1[3456789]\d{9}$/, trigger: 'onBlur' },
            ]"
          >
            <template v-slot:left-icon>
              <i class="fa fa-mobile"></i>
            </template>
          </van-field>
          <van-field
            v-model="password"
            type="password"
            name="password"
            placeholder="填写登录密码"
            :rules="[{ required: true }]"
          >
            <template v-slot:left-icon>
              <i class="fa fa-lock"></i>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="快速登录">
        <van-form @submit="loginBycode">
          <van-field
            v-model.number="account"
            name="account"
            placeholder="收入手机号码"
            :rules="[
              { required: true },
              { pattern: /^1[3456789]\d{9}$/, trigger: 'onBlur' },
            ]"
          >
            <template v-slot:left-icon>
              <i class="fa fa-mobile"></i>
            </template>
          </van-field>
          <van-field
            v-model="verfycode"
            type="verfycode"
            name="verfycode"
            placeholder="填写验证码"
            :rules="[{ required: true }]"
          >
            <template v-slot:left-icon>
              <i class="fa fa-lock"></i>
            </template>
            <template #button>
              <van-button
                size="small"
                type="primary"
                :disabled="isSend"
                @click="sendCode"
                native-type="button"
                >{{
                  !isSend ? "发送验证码" : counter + "秒之后继续发送"
                }}</van-button
              >
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {mapMutations,mapActions} from 'vuex'
export default {
  data() {
    return {
      account: "",
      password: "",
      verfycode: "",
      sendkey: "",
      counter: 60,
      isSend:false,
      timmerID:null,
    };
  },
  created(){
    this.axios.get("/verify_code").then(r=>{
      this.sendkey=r.key;
    })
  },
  methods: {
    ...mapMutations(['saveToken']),
    ...mapActions(['getuserInfo','getuserOrder']),
    loginByPassword(event) {
      // console.log(event);
      this.axios.post("/login", event).then(re => {
        console.log(re);
        if (re.status == 400) {
          this.$dialog.alert({
            title: "登录提示",
            message: re.msg
          });
        } else {
          this.saveToken(re.token);
          this.$dialog.alert({
            title: "登录提示",
            message: '登录成功!'
          }).then(()=>{
            this.getuserInfo();
            this.getuserOrder();
            this.$router.back();
          })
        }
      });
    },
    sendCode(){//发送验证码
      this.axios.post("/register/verify",{
        code:'',
        key:this.sendkey,
        phone:this.account,
        type:'login'
      }).then(re=>{
        if(re.status==200){//验证码发送成功
          this.$toast.success(re.msg);
          this.isSend=true;
          this.timmerID=setInterval(()=>{
            if(this.counter==0){
              this.isSend=false;
              clearInterval(this.timmerID);
              return
            }
            this.counter--;
          },1000);
          // this.isSend=true;
        }else{
          this.$toast.fail(re.msg);
        }
      })
    },
    loginBycode(event) {
      this.axios.post("login/mobile",{
        phone:event.account,
        captcha:event.verfycode,
        spread:null
      }).then(re=>{
        if(re.token){
          this.saveToken(re.token);
          this.$toast.success({
            message:'登录成功',
            onClose:()=>{
              this.getuserInfo();
              this.getuserOrder();
              this.$router.back();
            }
          })
        }else{
          this.$toast.fail(re.msg);
        }
      })
    },
  }
};
</script>
<style lang="less">
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#eb5447),
    to(#ff8e3b)
  );
  .logined {
    width: 305.8px;
    height: 299.3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 10px;
    .imgslogo {
      position: absolute;
      width: 82px;
      top: -120px;
      left: 50%;
      transform: translate(-50%, 0);
      height: 82px;
      background-color: hsla(0, 0%, 100%, 0.8);
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .van-tabs__wrap {
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      font-size: 18px;
      color: #282828;
      text-align: center;
      font-weight: 700;
      padding: 10px 50px;
      .van-tab__text--ellipsis {
        font-size: 18px;
      }
      .van-tabs__line {
        padding: 0px 15px;
      }
    }
    .fa-mobile {
      font-size: 24px;
      color: #ccc;
    }
    .fa-lock {
      font-size: 18px;
      color: #ccc;
    }
    .van-cell__value {
      padding-left: 15.7px;
    }
    .van-button--round {
      margin-top: 40.5px;
      background: linear-gradient(90deg, #f35447 0, #ff8e3c);
      border: none;
    }
    .van-button--small {
      height: 25px;
      padding: 0px 5px;
      vertical-align: middle;
    }
    .van-button__text {
      font-size: 12.5px;
    }
    .van-button--primary {
      background-color: #f35446;
      border: none;
      border-radius: 10px;
    }
  }
}
</style>


